<%@ tag language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="/struts-tags" prefix="s"%>

<%@ attribute name="modalName" description="modal name" required="true"%>
<%@ attribute name="modalTitle" description="modal title" required="true"%>
<%@ attribute name="eventTitle" description="event name" required="true"%>
<%@ attribute name="userName" description="user ID" required="true"%>

${subfix}
<!-- Modal -->
<div class="modal fade" id="${modalName}" data-backdrop="static" tabindex="-1" role="dialog"
	aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header" style="background-color: #62a8d1; color: white;">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				<h4 class="modal-title" id="myModalLabel">${modalTitle}</h4>
			</div>
			<div class="modal-body">
				<font color="red">*</font> Tiêu đề
				<input type="email" name="title" id="title" placeholder="Nhập tiêu đề" style="width: 89%"
					value="${eventTitle}">
				<label class="control-label" for="reservationtime">
					<font color="red">*</font> Diễn ra cả ngày
					<input type="checkbox" id="isAllDay" name="isAllDay" checked>
				</label>
				<div style="position: relative;">
					<div class="controls controls-row">
						<div id="alldayPicker" style="float: right; width: 70px;">
							<button type="button" id="daterange_allday" style="margin-top: 3px;">
								Chọn <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
							</button>
						</div>
						<div id="notAlldayPicker" style="float: right; width: 70px; display: none;">
							<button type="button" id="daterange" style="margin-top: 3px;">
								Chọn <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
							</button>
						</div>
						<div class="controls">
							<input type="hidden" id="daterange_start" value="${start}">
							<font color="red">*</font> Từ
							<input type="text" id="daterange_start_show" readonly style="width: 200px">
							<input type="hidden" id="daterange_end" value="${start}">
							Đến
							<input type="text" id="daterange_end_show" style="width: 200px" readonly>
						</div>
					</div>
					<input type="hidden" value="${userName}" id="hiddenUsername" />

					Địa điểm
					<input type="text" class="form-control" name="location" id="location" placeholder="Nhập địa điểm">
					Mô tả
					<textarea class="form-control" rows="3" name="description"></textarea>
					<div>
						Mời tham gia
						<input type="text" name="invitedPerson" id="invitedPerson" value="${invitedPerson}">
					</div>
					<font color="red">*</font>Trạng thái :
					<input style="margin-left: 20px" type="radio" name="event-status" value="public">
					Công khai
					<input style="margin-left: 20px" name="event-status" type="radio" value="private">
					Riêng tư
					<br />
				</div>
				<font color="red" style="position: absolute; left: 0; margin-left: 20px; bottom: 0; font-size: 10;">(*) Bắt
					buộc</font>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-primary">Tạo mới</button>
				<button type="button" class="btn btn-default" data-dismiss="modal">Hủy</button>
			</div>
		</div>
		<!-- /.modal-content -->
	</div>
	<!-- /.modal-dialog -->
</div>
<!-- /.modal -->

<script type="text/javascript">

$(document).ready(function(){
    
    //------------- date range picker --------------------------//
	var startInput = document.getElementById('daterange_start');
	var endInput = document.getElementById('daterange_end');
	var startShow = document.getElementById('daterange_start_show');
	var endShow = document.getElementById('daterange_end_show');
	
	function getValidMoment(){
		var theMoment = moment().clone();
		theMoment.seconds(33);
		var minutes = theMoment.minutes();
		var modNumber = minutes%5;
		
		if (modNumber >0 && modNumber <3){			
			theMoment.subtract("minutes", modNumber);			
		} else if (modNumber >= 3 && modNumber <5){
			theMoment.add("minutes", 5-modNumber);
		}
		return theMoment;
	}
	
	var currentTime = getValidMoment();
	startInput.value = currentTime.format('YYYY-MM-DDT00:00:00Z');
	startShow.value = currentTime.format('DD/MM/YYYY');
	endInput.value = currentTime.format('YYYY-MM-DDT00:00:00Z');
	endShow.value = currentTime.format('DD/MM/YYYY');
	
	
	$('#daterange').daterangepicker(
	{ 
		timePicker: true,
		opens:"left",
		timePicker12Hour: true,
		showWeekNumbers: true,
		startDate:currentTime.clone().add({minutes:30}),
		endDate:currentTime.clone().add({minutes:60}),
		minDate: currentTime.clone(),
		/*maxDate: currentTime.clone().add({minutes:60}),*/
		timePickerIncrement: 5,
		format: "DD/MM/YYYY (hh:mm A)",
		separator:" đến ",
	},
		function(start, end) {
		
			//validate start time (start ko the nho hon start standard, 30 phut)
			if(start.minutes() >= currentTime.clone().add({minutes:30}).minutes()){
				/*var startInput = document.getElementById('daterange_start');
				var endInput = document.getElementById('daterange_end');*/
				startInput.value = start.format('YYYY-MM-DDTHH:mm:00Z');
				endInput.value = end.format('YYYY-MM-DDTHH:mm:00Z');
				startShow.value = start.format('DD/MM/YYYY (hh:mm A)');
				endShow.value = end.format('DD/MM/YYYY (hh:mm A)');
			}
		}
	);
	
	$('#daterange_allday').daterangepicker(
	{ 
		/*timePicker: false,
		timePicker12Hour: false,*/
		showWeekNumbers: true,
		opens:"left",
		minDate: currentTime.clone(),
		format: "DD/MM/YYYY",
		startDate: currentTime.clone(),
		separator:" đến hết ",
		endDate: currentTime.clone(),
		ranges: {
			 'Hôm nay': [currentTime.clone(), currentTime.clone()],
			 'Ngày mai': [currentTime.clone().add({days:1}), currentTime.clone().add({days:1})],
		},
	},
		function(start, end) {
			startInput.value = start.format('YYYY-MM-DDT00:00:00Z');
			endInput.value = end.clone().add("days", 1).format('YYYY-MM-DDT00:00:00Z');
			startShow.value = start.format('DD/MM/YYYY');
			endShow.value = end.clone().format('DD/MM/YYYY');
		}
	);
	
	$('#isAllDay').change(function() {
		startInput.value = "";
		endInput.value = "";
		// 
		var isAlldayEvent = $(this).is(':checked');
		if(isAlldayEvent){
			$('#alldayPicker').show();
			$('#notAlldayPicker').hide();
			setDateTime("allday")
		} else {
			$('#notAlldayPicker').show();
			$('#alldayPicker').hide();
			setDateTime("nonallday");
		}
		
	});
	
	function setDateTime(type){
		if (type == 'allday'){
			startInput.value = currentTime.clone().format('YYYY-MM-DDT00:00:00Z');
			startShow.value = currentTime.clone().format('DD/MM/YYYY');
			endInput.value = currentTime.clone().format('YYYY-MM-DDT00:00:00Z');
			endShow.value = currentTime.clone().format('DD/MM/YYYY');
		} else if (type== 'nonallday'){
			// event phai co start it nhat 30 phut sau thoi diem hien tai
			startInput.value = currentTime.clone().add({minutes:30}).format('YYYY-MM-DDTHH:mm:00Z');
			startShow.value = currentTime.clone().add({minutes:30}).format('DD/MM/YYYY (hh:mm A)');
			// event co do interval toi thieu 30 phut so voi start --> 60 phut so voi hien tai
			endInput.value = currentTime.clone().add('minutes', 60).format('YYYY-MM-DDTHH:mm:00Z');
			endShow.value = currentTime.clone().add('minutes', 60).format('DD/MM/YYYY (hh:mm A)');
		}
	}
	
	//---------- END Date range picker -----------------//
	
	//---------------tag Input----------------------//
	$('#invitedPerson').tagsInput({
	    /*'autocomplete_url': url_to_autocomplete_api,
	    'autocomplete': { option: value, option: value},
	    'placeholderColor' : '#666666',*/
	    'width':'auto',
	    'interactive':true,
	    'defaultText':'Thêm email',
	    'onAddTag':function(value){
				// he thong tu dong add roi, nen ko can xu ly gi them
			},
	    'onRemoveTag':function(value){
				// he thong tu dong add roi, nen ko can xu ly gi them	
	    	},
	    /*'onChange' : function(htmlObject){},*/
	    'removeWithBackspace' : true,
	    'minChars' : 0,
	    'maxChars' : 0, //if not provided there is no limit
	    
	 });
	
});


</script>